<template>
  <div class="hello">
    <!-- 图片上传 -->
    <div class="upload_img" @click="fileClick" v-if="up_type === 'img' || up_type === 'zh' || up_type === 'en'">
      <div v-if="!url" class="up">上传图片</div>
      <div v-if="url" class="delete">更换图片</div>
      <img :src="url" v-if="url" style="width: 100%; height: 100%; object-fit: contain;" alt="加载中..."/>
      <span v-else class="placeholder-text"></span>
    </div>

    <!-- 附件上传 -->
    <div v-if="up_type === 'bin'">
      <el-button class="bt-color-tjd" @click="fileClick" type="primary">
        {{ !name ? '上传文件' : '更换文件' }}
        <i class="el-icon-upload el-icon--right"></i>
      </el-button>
      <span style="margin-left: 10px;">{{ name }}</span>
    </div>

    <!-- 隐藏的文件上传输入框 -->
    <div class="upload">
      <input
        @change="fileChange($event)"
        type="file"
        :id="up_type"
        :accept="accept"
        multiple
        style="display: none"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      default: () => ''
    },
    name: {
      type: String,
      default: () => ''
    },
    up_type: {
      type: String,
      default: () => 'img' // 默认是图片上传
    }
  },
  data () {
    return {
      accept: '.xls, .xlsx, .doc, .docx'// 默认接受图片格式
    }
  },
  watch: {
    // 根据上传类型动态更新支持的文件类型
    up_type (newType) {
      if (newType === 'bin') {
        this.accept = '.xls, .xlsx, .doc, .docx' // 只支持 Excel 和 Word 格式
      } else {
        this.accept = '.jpg, .png, .bmp, .jpeg' // 默认图片格式
      }
    }
  },
  methods: {
    fileClick () {
      document.getElementById(this.up_type).click() // 点击上传按钮触发文件选择框
    },
    fileChange (el) {
      const file = el.target.files[0]
      if (!file) return
      if (this.up_type === 'bin') {
        this.validateFile(file)  // 附件格式校验
      } else {
        this.fileAdd(file)  // 图片格式上传
      }
      el.target.value = '' // 清空文件选择框
    },
    validateFile (file) {
      const validFormats = ['.xls', '.xlsx', '.doc', '.docx']
      const fileName = file.name.toLowerCase()
      const isValid = validFormats.some(format => fileName.endsWith(format))

      if (!isValid) {
        this.$message.error('请上传 Excel 或 Word 格式的文件！')
        return false
      }

      this.fileAdd(file)  // 格式校验通过，继续处理上传
    },
    fileAdd (file) {
      const reader = new FileReader()
      reader.vue = this
      reader.readAsDataURL(file)
      reader.onload = function () {
        file.src = this.result
        this.vue.$emit('chang_up', { file, key: this.vue.up_type })
      }
    }
  }
}
</script>

<style>
.upload_img {
  position: relative;
  width: 120px;
  height: 120px;
  border: 1px solid #999;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
  display: flex; /* 使用 Flex 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.upload_img img {
  max-width: 100%;
  max-height: 100%;
}

.up,
.delete {
  position: absolute;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.upload_img:hover .delete {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
}

.delete {
  position: absolute;
  top: 120px;
  left: 120px;
  background-color: rgba(0, 0, 0, 0);
}

.upload_img img {
  height: 120px;
}
</style>
